<template>
  <div>
    <div class="search">
      <a-form :model="formModel">
        <a-row :gutter="20">
          <a-col :span="6" :lg="6" :xs="9" :md="8">
            <a-form-item label="提交日期">
              <a-range-picker
                v-model:value="data.time"
                style="width: 100%"
                :ranges="data.ranges"
                show-time
                format="YYYY/MM/DD HH:mm:ss"
                @change="panelChange"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="提交人">
              <a-input placeholder="请输入提交人" v-model:value="formModel.submitPerson"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 头部 -->
    <div class="global-button">
      <a-button type="primary" @click="handleSearch(1)" class="d-a-center">搜索</a-button>
    </div>
    <!-- 列表 -->
    <a-table
      rowKey="id"
      :row-selection="rowSelection"
      :columns="columns"
      :data-source="renderData"
      bordered
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #status="{ record }">
        <div>{{ orderStatus[record.status] }}</div>
      </template>

      <template #operation="{ record }">
        <a-button
          type="link"
          @click="edit(record)"
          v-if="(userInfo.departmentId == 29 && record.status == 0) || (userInfo.departmentId == 30 && record.status == 1)"
          >审核</a-button
        >
        <a-button type="link" v-else @click="edit(record)">查看</a-button>
        <a-button type="link" @click="down(record)" v-if="record.status == 4 && record.invoicePic">下载发票</a-button>
      </template>
    </a-table>

    <InvoiceModal ref="invoiceModalRef"></InvoiceModal>
    <inputModal @ok="handleOk" ref="inputModalRef" type="input" label="金额" title="修改价格" :number="data.number"></inputModal>
  </div>
</template>
<script setup>
import { reactive, ref, watch, computed, createVNode, toRefs, defineOptions } from 'vue'
import { Modal, notification, message } from 'ant-design-vue'
import { columnsArr, dataObj, statusColorObj, orderStatus } from './data'
import router from '@/router/index.js'
import InvoiceModal from '../components/InvoiceModal.vue'
import inputModal from '@/components/common/inputModal.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { useTable, useModal, useSelects } from '@/hooks'
import { selectInvoiceList } from '@/api/buisness/index'
import { useStore } from 'vuex'

defineOptions({
  name: 'ContentTranslateOrder'
})
// 状态列表

const columns = columnsArr

const data = reactive(dataObj)
// 选择时间
const panelChange = (date, dateString) => {
  formModel.value.startTime = dateString[0]
  formModel.value.endTime = dateString[1]
}
const store = useStore()
const userInfo = JSON.parse(store.state.userInfo)
const useStatus = () => {
  let map = {
    29: 1,
    30: 2
  }
  return map[userInfo.departmentId] ? map[userInfo.departmentId] : 0
}
const status = useStatus()
//必须有括号 建议箭头函数 防止深拷贝
const getParams = () => ({
  status: status
})

const { info, renderData, formModel, loading, pagination, handleSearch, handleTableChange } = useTable({
  api: selectInvoiceList,
  getParams
})
handleSearch(1)

const invoiceModalRef = ref()
const inputModalRef = ref()

const down = record => {
  record.invoicePic.split(',').forEach((item, index) => {
    createLink(item, index)
  })
}

const createLink = async (value, index) => {
  try {
    // 获取文件内容
    const response = await fetch(value)
    const blob = await response.blob()

    // 创建下载链接
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.style.display = 'none'
    link.href = url

    // 设置文件名
    const fileName = value.substring(value.lastIndexOf('/') + 1) || `发票${index + 1}.pdf`
    link.download = fileName

    // 触发下载
    document.body.appendChild(link)
    link.click()

    // 清理
    window.URL.revokeObjectURL(url)
    document.body.removeChild(link)
  } catch (error) {
    console.error('下载文件失败:', error)
  }
}
const { renderData: selectsRenderData, rowSelection } = useSelects({
  key: 'id'
})

const handleJump = (id, listPage) => {
  router.push({
    path: '/content/translate/options',
    query: {
      id: id
    }
  })
}
const handleOk = value => {
  console.log(value)
}
const excleData = () => {
  if (rowSelection.selectedRowKeys.length == 0) {
    message.warning('请选择你要开票的订单')
    return
  }
  invoiceModalRef.value.showModal()
}
const edit = record => {
  router.push({
    path: '/business/bill/invoiceDetail',
    query: {
      id: record.id
    }
  })
}
</script>

<style scoped lang="less">
.search {
  // background-color: #e6e6e6;
  padding-left: 20px;
  margin-bottom: 20px;
}
</style>
